<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html">
	<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="email=no">
	<title>首页</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="assets/swiper/css/swiper.min.css"/>
</head>
<body>
	
	<!-- 头部导航 -->
	<header class="header">
		<!-- Swiper -->
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide"><img src="images/imgs_01.jpg"/></div>
		        <div class="swiper-slide"><img src="images/imgs_01.jpg"/></div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>		    
		</div>
	</header>
    <!-- 图片 -->
    <div class="imgs">
    	<div>
    		<a href="html/beautiful_list.html"><img src="images/imgs_02.jpg"/></a>
    	</div>
    	<div>
    		<a href="html/beautiful_list.html"><img src="images/imgs_03.jpg"/></a>
    	</div>
    </div>
    <!-- 特别策划 -->
    <div class="specialplanning">
    	<div class="_top">
    		<p>特别策划</p>
    		<p>行走获知看这里</p>
    	</div>
    	<div class="picture">
    		<!-- Swiper -->
		    <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		        </div>
		        
		    </div>
    	</div>
    	<div class="_bottom">
    		<p>查看更多</p>
    		<p><img src="images/right.png"/></p>
    	</div>
    </div>
    <!-- 风向标 -->
    <div class="wind_indicator">
    	<div class="_top">
    		<p>出游风向标</p>
    		<p>个性化定制你的专属目的地</p>
    	</div>
    	<div class="picture">
    		<!-- Swiper -->
		    <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_04.jpg"/></div>
		        </div>		        
		    </div>
    	</div>
    	<div class="_bottom">
    		<p>查看我的出游风向标</p>
    		
    	</div>
    </div>
    <!-- 热门话题 -->
    <div class="hot_topic">
    	<div class="_top">
    		<p>热门话题</p>
    		<p>精彩话题聊翻天</p>
    	</div>
    	<div class="picture">
    		<!-- Swiper -->
		    <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		        </div>		        
		    </div>
    	</div>
    	<div class="_bottom">
    		<p>查看更多</p>
    		<p><img src="images/right.png"/></p>
    	</div>
    </div>
    <!-- 中国风景 -->
    <div class="scenery">
    	<div class="_top">
    		<p>中国风景</p>
    		<p>壮丽山河 锦绣中华</p>
    	</div>
    	<div class="picture">
    		<!-- Swiper -->
		    <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		            <div class="swiper-slide"><img src="images/imgs_05.jpg"/></div>
		        </div>		        
		    </div>
    	</div>
    	<div class="_bottom">
    		<p>查看更多</p>
    		<p><img src="images/right.png"/></p>
    	</div>
    </div>
    <!-- 小伙伴去过的地方 -->
    <div class="friend_place">
    	<div class="_top">
    		<p>小朋友去过的景区</p>
    		<p>出行正当季，伙伴们都玩疯了</p>
    	</div>
    	<div class="picture">
    		<!-- Swiper -->
		    <div class="swiper-container">
		        <div class="swiper-wrapper">
		            <div class="swiper-slide">
		            	<dl>
		            		<dt><img src="images/imgs_06.jpg"/></dt>
		            		<dd>北京奥林匹克公园</dd>
		            	</dl>
		            </div>
		            <div class="swiper-slide">
		            	<dl>
		            		<dt><img src="images/imgs_06.jpg"/></dt>
		            		<dd>北京奥林匹克公园</dd>
		            	</dl>
		            </div>
		            <div class="swiper-slide">
		            	<dl>
		            		<dt><img src="images/imgs_06.jpg"/></dt>
		            		<dd>北京奥林匹克公园</dd>
		            	</dl>
		            </div>
		            <div class="swiper-slide">
		            	<dl>
		            		<dt><img src="images/imgs_06.jpg"/></dt>
		            		<dd>北京奥林匹克公园</dd>
		            	</dl>
		            </div>
		            <div class="swiper-slide">
		            	<dl>
		            		<dt><img src="images/imgs_06.jpg"/></dt>
		            		<dd>北京奥林匹克公园</dd>
		            	</dl>
		            </div>
		            <div class="swiper-slide">
		            	<dl>
		            		<dt><img src="images/imgs_06.jpg"/></dt>
		            		<dd>北京奥林匹克公园</dd>
		            	</dl>
		            </div>
		           
		        </div>		        
		    </div>
    	</div>
    	<div class="_bottom">
    		<p>查看更多</p>
    		<p><img src="images/right.png"/></p>
    	</div>
    </div>
    <!-- 底部导航 -->
    <div class="nav_bottom">
    	<dl class="index">
    		<dt><img src="images/index_nav_01_cheak.jpg"/></dt>
    		<dd>发现</dd>
    	</dl>
    	<dl class="map">
    		<dt><img src="images/index_nav_02.jpg"/></dt>
    		<dd>地图</dd>
    	</dl>
    	<dl class="fresh">
    		<dt><img src="images/index_nav_03.jpg"/></dt>
    		<dd>新鲜</dd>
    	</dl>
    	<dl class="mine">
    		<dt><img src="images/index_nav_04.jpg"/></dt>
    		<dd>我的</dd>
    	</dl>
    </div>
    <script src="assets/swiper/js/swiper.min.js"></script>
	<script src="assets/jquery/jquery-3.2.1.min.js"></script>
	<script src="js/index.js"></script>
</body>
</html>
